<template>
	<view class="app">
		<view class="shopinfo">
			<image :src="store.logo" mode="aspectFill" class="logo"></image>
			<view class="shopname">{{store.title}}</view>
		</view>
		<view class="inputbox">
			<view class="input">
				<view class="dorlar">￥</view>
				<input placeholder="请输入消费金额" type="digit" :value="vuex_cart.total" disabled style="background: none; color: #999;" />
			</view>
			<view class="remark">
				<input placeholder="添加备注20字以内" type="text" v-model="remark" maxlength="20"/>
			</view>
		</view>
		<view class="main" v-if="gwq>0"  :key="index" style="background-color: white;">
			<view class="qiu1"></view>
			<view class="qiu2"></view>
			<view class="main-left"
				style="background-image: url('https://admin.cqycgyl.com/uploads/20250811/1652c233afcb6d7777e35111b7e3d8bc.png');">
				<text class="tx">{{gwq}}</text>
				<text class="tx1">本单获得</text>
			</view>
			<view class="main-title">
				{{type == 1?'绿色支付金':'云仓购物券'}}
			</view>
			<view class="main-time">
				海量商品，免费兑换
			</view>
			<view class="main-btn" @click="GotoPay" v-if="pay_status">
				去使用
			</view>
			<view class="main-btn" v-else :style="{backgroundColor: 'white',color: '#aaaaaa'}">
				待付款
			</view>
			<button class="main-btn" open-type="share"
				v-if="recentCoupon!=undefined"
				style="
					right: -9px;
					top: -5px;
					width: 30px;
					padding: 0;
				">				
				分享
		    </button>
		</view>
		<view class="paybox">
			<view class="payquan" @click="show = true">
				<view class="payitem">
					<image src="https://admin.cqycgyl.com/uploads/20250811/4037d305faed66de32d029fcd4096058.png" mode="" class="wxpay1"></image>
					<view class="pay-title">支付金</view>
				</view>
				<view class="payitem1">
					<text style="font-size: 28rpx;color: #999999;" v-if="Quanflag">当前支付金抵扣金额:￥{{couponPrice}}</text>
					<text style="font-size: 28rpx;color: #999999;" v-else>当前有{{Quan}}张支付金可用</text>
					<image src="https://admin.cqycgyl.com/uploads/20250811/4b9f75b1c9e4087595b6007c6f75c268.png" mode="" style="width: 12rpx;height: 19rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
		
		</view>

		
		<u-popup v-model="show" mode="bottom" height='700rpx' border-radius="29">
			<view class="Quanpp">
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="Quantitle">
					选择支付金
				</view>
				<view class="Quantitle1">
					您已选中支付金{{chooseQuanData.length}}个，可抵扣:<text style="color: #E15345;">￥{{couponPrice}}</text>
				</view>
				<view class="Quantitle1" style="margin-top: 20rpx;color: red;font-size: 20rpx;">
					注:未使用完的支付金可继续使用
				</view>
				<view v-for="(item,index) in QuanData" :key="index" class="main" @click="PayQuan(index,item)">
					<view class="qiu1"></view>
					<view class="qiu2"></view>
					<view class="main-left">
						<text class="tx" :style="{'fontSize':item.money.toString().length>=5?'50rpx':'72rpx'}">{{item.money}}</text>
						<text class="tx1">支付金(元)</text>
					</view>
					<view class="main-title">
						驿站支付金
					</view>
					<view class="main-time">
						有效期至:{{item.end_time}}
					</view>
					<view class="main-bottom">
						使用规则
					</view>
					<view class="main-img">
						<image src="https://admin.cqycgyl.com/uploads/20250811/fedff7443b1c3e8be8a92e346fe896b6.png" mode=""
							style="width: 100%;height: 100%;"></image>
					</view>
					<view class="main-btn" >
						<image 
						src="https://admin.cqycgyl.com/uploads/20250811/10d7c2bd07e2b4ff79d7a640d1c1052f.png" 
						mode="" 
						class="wxpay2" 
						v-if="chooseQuanData.findIndex(val => val.id === item.id) === -1"></image>
						<image src="https://admin.cqycgyl.com/uploads/20250811/3ebc3e3ba8bc445d209dc0c61980fa7d.png" mode="" class="wxpay2" v-else></image>
					</view>
				</view>
				<view class="GoPayQuanadd"></view>
				<view class="GoPayQuan">
					<view class="GoPayQuan1" @click="Use">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<view style="width: 100%;height: 116rpx;"></view>
		<view class="Btn">
			<view class="Btntitle">
				实付:
			</view>
			<view class="Btntitle1">
				<text style="font-size: 24rpx;">￥</text>{{finalAmount}}
			</view>
			<view class="Btntitle2 " @click="confirmPay">
				确定支付
			</view>
		</view>
		
		
		<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide"></cu-keyboard>
		
		<view class="open_rbag_model" v-if="redpackshow" @touchmove.prevent.stop>
			<image class="rbag_conbg" src="/static/images/openrbag.png"></image>
			<view class="rbag_conbg open_rbag_con">
				<view class="open_title">— 恭喜您获得 —</view>
				<view class="rbag_detail">
					<view class="open_money">
						<text>{{gwq}}</text>
						<view class="danwei">券</view>
					</view>
					<view class="open_tips">已存入券包，可直接使用</view>
				</view>
				<view class="lookbag_box">
					<view class="lookbag_btn">
						<view class="text" @click.stop="lookmycoupon()">查看我的购物券</view>
					</view>
				</view>
				<view class="hide_btn" @click.stop="hideopenbtn()">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: '',
				store: [],
				id: '',
				payMoney: '',
				show: false,
				QuanData: [],
				chooseQuanData: [],
				Quanflag:false,
				Quan: '',
				remark: '',
				coupon_ids: '',
				gwq: '',
				redpackshow: false,
				orderData: [],
				isBack: 0, 
				pay_status: false,
				imageUrl: 'https://admin.cqycgyl.com/uploads/20250811/4037d305faed66de32d029fcd4096058.png',
				recentCoupon: undefined,
				notify: '',
				title:'',
				desc:'',
				shareType:0
			}
		},
		computed: {
		    couponPrice() {	
				// 使用reduce方法累加数组中每个对象的price属性值
				let sum = this.chooseQuanData.reduce((accumulator, currentItem) => accumulator + (currentItem.money-0), 0);
				sum = parseFloat(sum.toFixed(2));
				return sum;
		    },
			finalAmount() {
				const preciseFinalAmount = parseFloat((this.vuex_cart.total - this.couponPrice).toFixed(2));
				if(preciseFinalAmount <=0){
					return 0
				}else{
					return preciseFinalAmount;
				}
			},
		},
		onLoad(options) {
			if (options.q){
				let qrUrl = decodeURIComponent(options.q)
				let id = this.getQueryString(qrUrl, 'id');
				this.shop_id = id;
			}else if(options.shop_id){
				this.shop_id = options.shop_id
				console.log('gwq');
				
			}
			
			// 获取商家信息
			this.$u.api.shop.getStoreInfo(this.shop_id).then(res =>{
				if(res.code == 200){
					this.store = res.data
					console.log(`${this.store.bili} * (${this.vuex_cart.total} / 100) * ${this.store.rlb}`);
					this.gwq =  (this.store.bili * (this.vuex_cart.total / 100) * this.store.rlb).toFixed(2);
				}
			}).catch((err)=>{
				this.$u.toast(err.data.msg)
			})
			this.$u.api.describ.getShareIcon().then(res =>{
				if(res.code == 1){
					this.imageUrl = res.data.imageUrl
					this.notify = res.data.url
					this.title = res.data.title
					this.desc = res.data.desc
					this.shareType = res.data.type
				}
			})
		},
		onShow() {
			let that = this
			that.getMyCoupon()
			
			// 查询是否支付
			if(that.isBack == 1){
				that.queryOrderPay()
			}
		},
		methods:{
			getRecentCoupon(){
				this.$u.api.user.getRecentCoupon().then(res =>{
					if(res.code == 1){
						this.recentCoupon = res.data
					
					}
				})
			},
			GotoPay(){
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
			onShareAppMessage(res) {
				if (res.from === 'button') {// 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: this.title,
					path: this.notify + '?id=' + this.recentCoupon.id,
					desc: this.desc,
					imageUrl: this.imageUrl,
					type: this.shareType,
					query: {
						id: this.recentCoupon.id
					},
					success: () => {
						uni.showModal({
							title: '赠送成功',
							content: '您已赠送一张云仓购物券给好友',
							showCancel: false
						})
					}
				}
			},

		

			/**
			* 获取小程序二维码参数
			* @param {String} scene 需要转换的参数字符串
			*/
			getQueryString: function(url, name) {
			    let reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
			    let r = url.substr(1).match(reg)
			    if (r != null) {
			        return r[2]
			    }
			    return null;
			},
			selectCoupons(coupons) {
			    let remainingPrice = parseFloat(this.payNum); 
			    coupons.sort((a, b) => new Date(a.end_time.replace(/-/g,'/')) - new Date(b.end_time.replace(/-/g,'/'))); 
			    for (let coupon of coupons) {
			        if (remainingPrice <= 0) break; 
			        if (new Date(coupon.end_time.replace(/-/g,'/')) > new Date() && coupon.money_all != '0.00') {
			            let usableAmount = parseFloat(coupon.money); 
			                this.chooseQuanData.push(coupon); 
			                remainingPrice -= usableAmount; 
			        }
			    }
			},
			PayQuan(index,val){
				if(this.vuex_cart.total == ''){
					this.$u.toast('请输入消费金额')
					return;
				}
				if(this.vuex_cart.total <= 0){
					this.$u.toast('消费金额输入有误')
					return;
				}
				const index1 = this.chooseQuanData.findIndex(item => item.id === val.id);
				
				if (index1 !== -1) {
				  this.chooseQuanData.splice(index1, 1);
				} else {
				  this.chooseQuanData.push(val);
				}
			},
			Use(){
				this.Quanflag = true
				this.show = false
			},
			getMyCoupon(){
				this.$u.api.index.getQuan({type:1,state:1}).then(item => {
					this.$nextTick(() =>{
						this.QuanData = item.data
						this.Quan = item.data.length
					})
					// this.selectCoupons(item.data)
				}).catch(req =>{
					this.$nextTick(()=>{
						this.Quan = 0
					})
				})
			},
			confirmPay(){
				let that = this
				
				if(!this.vuex_token){
					uni.navigateTo({
						url: '/pageA/common/login'
					})
					return
				}

				// uni.navigateTo({
				// 	url: '/pages/shop/choujiang'
				// })
				if(this.vuex_cart.total == ''){
					this.$u.toast('请输入消费金额')
					return;
				}
				if(this.vuex_cart.total <= 0){
					this.$u.toast('消费金额输入有误')
					return;
				}
				let coupon_ids = this.chooseQuanData.map(item => item.id)
				this.$u.api.shop.payOrder(
					{
						id: this.shop_id, 
						cart: this.vuex_cart,
						remark: this.remark,
						coupon_ids
					}
				).then(res => {
					if(res.code == 1){
						// 唤起收银台
						// let data = res.data
						// that.orderData = data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(ress) {
								console.log('ress',ress)
								if(ress.errMsg == 'requestPayment:ok'){
									that.pay_status = true	
									that.getRecentCoupon()
									setTimeout(() => {
										
									}, 1000);
								}else{
									that.$u.toast(ress.errMsg)
									that.pay_status = false
								}
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'error'
								})
							}
						});
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'error'
						});
					}	
				}).catch(err =>{
					console.log(err)
				})
			},
			
			queryOrderPay(){
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				that.$u.api.shop.queryOrderPay(
					{
						order_id: that.orderData.orderNo
					}
				).then(res =>{
					uni.hideLoading()
					if(res.code == 200){
						that.$u.toast(res.msg)
						setTimeout(()=>{
							that.redpackshow = true
						},1000)
					}
				}).catch((err)=>{
					uni.hideLoading()
					that.$u.toast(err.data.msg)
				})
			},
			lookmycoupon(){
				uni.navigateTo({
					url: '/pages/my/myquan?type=0'
				})
			},
			hideopenbtn(){
				this.redpackshow = false
			},
			
			change(e){
				this.value = e;
				console.log("数字改变",e);			
			},
			open(){
				console.log("打开键盘");
				this.$refs.cukeyboard.open();
			},
			confirm(e){
				console.log("付款",e);
			},
			hide(){
				console.log("关闭键盘")
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	page{
		background-color: #f1f1f1;
	}

	.main {
		width: 694rpx;
		height: 194rpx;
		background: url('https://admin.cqycgyl.com/uploads/20250811/0f385002147d6fd69102a136b27f98a7.png') center/cover;
		margin-left: 28rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.main-left {
		position: relative;
		width: 190rpx;
		height: 194rpx;
		background: url('https://admin.cqycgyl.com/uploads/20250811/1652c233afcb6d7777e35111b7e3d8bc.png') center/cover;
		background-color: rgba(54, 190, 106, 0.95);
		border-radius: 16rpx;
	}

	.qiu1 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		left: 180rpx;
		z-index: 10;
	}

	.qiu2 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		bottom: -10rpx;
		left: 180rpx;
		z-index: 10;
	}

	.tx {
		width: 100%;
		height: 56rpx;
		position: absolute;
		top: 48rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 72rpx;
		color: white;
	}

	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}

	.main-title {
		width: 160rpx;
		height: 32rpx;
		position: absolute;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}

	.main-time {
		width: 222rpx;
		height: 20rpx;
		position: absolute;
		top: 86rpx;
		left: 214rpx;
		font-size: 24rpx;
		color: rgba(122, 122, 122, 1);
	}

	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		position: absolute;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}

	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}

	.main-btn {
		width: 160rpx;
		height: 58rpx;
		position: absolute;
		top: 68rpx;
		right: 40rpx;
		border-radius: 29rpx;
		background-color: rgba(54, 190, 106, 1);
		color: white;
		font-size: 24rpx;
		text-align: center;
		line-height: 58rpx;
	}
	

	.shopinfo{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 100rpx;
		.logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.shopname{
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333;
		}
	}
	.inputbox{
		background-color: #fff;
		margin: 0 30rpx;
		margin-top: 80rpx;
		border-radius: 20rpx;
		padding:0 30rpx;
		.input{
			display: flex;
			align-items: center;
			height: 136rpx;
			border-bottom: 1rpx solid #ddd;
			font-size: 48rpx;
			.dorlar{
				color: #333;
				margin-right: 20rpx;
			}
			input{
				height: 140rpx;
			}
		}
		.remark{
			height: 80rpx;
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;
			input{
				width: 90%;
			}
		}
	}
	.paybox{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: white;
	}
	.payquan{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
	}
	.payitem{
		height: 46rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.payitem1{
		height: 46rpx;
		display: flex;
		align-items: center;
	}
	.wxpay1{
		width: 36rpx;
		height: 36rpx;
	}
	.pay-title{
		width: 200rpx;
		margin-left: 10rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.wxpay2{
		width: 36rpx;
		height: 36rpx;
	}
    .gwq{
		height: 46rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		margin-top: 10rpx;
		color: #333;
	}
	.Btn{
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	.Btntitle{
		font-size: 24rpx;
		color: #192524;
		width: 72rpx;
		height: 36rpx;
		line-height: 36rpx;
		margin-left: 30rpx;
	}
	.Btntitle1{
		font-size: 48rpx;
		color:#FF4D00;
		width: 328rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
	.Btntitle2{
		font-size: 28rpx;
		color:white;
		width: 290rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		background-color: #36BE6A;
		border-radius: 44rpx;
	}
	.Quanpp{
		width: 100%;
		min-height:700rpx;
		background-color: #F3F3F3;
	}
	.Quantitle{
		width: 100%;
		height: 28rpx;
		font-size: 32rpx;
		color: #101010;
		font-weight: bold;
		margin-top: 47rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.Quantitle1{
		min-width: 410rpx;
		height: 22rpx;
		margin-top: 38rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.GoPayQuan{
		width: 100%;height: 136rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		z-index: 999;
	}
	.GoPayQuanadd{
		width: 100%;height: 136rpx;
	}
	.GoPayQuan1{
		width: 690rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		border-radius: 44rpx;
		background-color: #36BE6A;
		color: white;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.main {
		width: 694rpx;
		height: 194rpx;
		background: url('https://admin.cqycgyl.com/uploads/20250811/0f385002147d6fd69102a136b27f98a7.png') center/cover;
		margin-left: 28rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}
	.main-left {
		position: relative;
		width: 190rpx;
		height: 194rpx;
		background: url('https://admin.cqycgyl.com/uploads/20250811/1652c233afcb6d7777e35111b7e3d8bc.png') center/cover;
		background-color: rgba(54, 190, 106, 0.95);
		border-radius: 16rpx;
	}
	.qiu1 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	.qiu2 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		bottom: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	.tx {
		width: 100%;
		height: 56rpx;
		position: absolute;
		top: 48rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 50rpx;
		color: white;
	}
	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}
	.main-title {
		width: 160rpx;
		height: 32rpx;
		position: absolute;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}
	.main-time {
		width: 222rpx;
		height: 20rpx;
		position: absolute;
		top: 86rpx;
		left: 214rpx;
		font-size: 24rpx;
		color: rgba(122, 122, 122, 1);
	}
	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		position: absolute;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}
	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}
	.main-btn {
		
		position: absolute;
		top: 68rpx;
		right: 40rpx;
	}
	
	
	.open_rbag_model {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		z-index: 1000;
		.rbag_conbg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 80%;
			height: 840upx;
			margin: auto;
			z-index: 1001;
		}
		.open_rbag_con {
			z-index: 1002;
			.open_title {
				height: 120upx;
				line-height: 120upx;
				text-align: center;
				font-size: 38upx;
				letter-spacing: 2upx;
				color: #e46965;
			}
			.rbag_detail {
				margin-top: 90upx;
				.open_money {
					text-align: center;
					font-size: 80upx;
					color: #c95948;
					font-weight: bold;
					display: flex;
					justify-content: center;
					.danwei {
						font-size: 30upx;
						margin-left: 16upx;
						margin-top: 24upx;
					}
				}
				.open_tips {
					text-align: center;
					font-size: 30upx;
					color: #d26762;
					margin-top: 30upx;
				}
			}
			.lookbag_box {
				margin-top: 200upx;
				display: flex;
				justify-content: center;
				.lookbag_btn {
					width: 70%;
					height: 90upx;
					line-height: 90upx;
					text-align: center;
					font-size: 32upx;
					color: #c95948;
					letter-spacing: 2upx;
					background-color: #ffd356;
					border-radius: 50upx;
					box-shadow: 0upx 0upx 4upx rgba(0,0,0,0.2);
				}
			}
			.hide_btn {
				position: absolute;
				bottom: -110upx;
				left: 0;
				right: 0;
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>